import { useLocation } from "@tanstack/react-router";
import * as React from "react";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";

export function Breadcrumbs() {
  const current = useLocation();
  const history = current.pathname.split("/").filter((x) => x && x.length > 0);
  const paths = ["example", ...history];

  return (
    <Breadcrumb>
      <BreadcrumbList>
        {paths.map((path) => (
          <React.Fragment key={path}>
            <BreadcrumbItem>
              <BreadcrumbPage className="capitalize">{path}</BreadcrumbPage>
            </BreadcrumbItem>
            {path !== paths[paths.length - 1] && <BreadcrumbSeparator />}
          </React.Fragment>
        ))}
      </BreadcrumbList>
    </Breadcrumb>
  );
}
